<template>
    <div class="child">
        <h3>子组件1</h3>
        <h4>玩具：{{ toy }}</h4>
        <h4>书籍{{ book }}本</h4>
        <button @click="minsHouse($parent)">干掉父亲一套房</button>
    </div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from "vue";
let toy = ref('奥特曼')
let book = ref(10)

function minsHouse(parent: any) {
    parent.house -= 1

}

defineExpose({ toy, book })
</script>

<style  scoped>
.child {
    background-color: rgb(197, 235, 135);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
}
</style>